<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 高级表格 + 导出 Excel</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入 SheetJS -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }

        .group-header {
            background-color: #f0f0f0;
            cursor: pointer;
            text-align: left;
        }

        .toolbar {
            margin-top: 16px;
        }

        .toolbar button {
            padding: 6px 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="toolbar">
            <button @click="exportExcel">导出到 Excel</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th>类别</th>
                    <th>区域</th>
                    <th>信息详情</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(group, groupIndex) in paginatedData" :key="groupIndex">
                    <tr class="group-header" @click="toggleGroup(groupIndex)">
                        <td>{{ group.category }}</td>
                        <td>{{ group.region }}</td>
                        <td>
                            <span v-if="group.expanded">▲ 收起</span>
                            <span v-else>▼ 展开</span>
                        </td>
                    </tr>
                    <tr v-show="group.expanded" v-for="(info, infoIndex) in group.infoList" :key="infoIndex">
                        <td colspan="2" style="border: none;"></td>
                        <td>{{ info }}</td>
                    </tr>
                </template>
            </tbody>
        </table>

        <div class="pagination">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
            <button v-for="page in totalPages" :key="page" @click="changePage(page)"
                :style="{ fontWeight: page === currentPage ? 'bold' : 'normal' }">
                {{ page }}
            </button>
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentPage: 1,
                pageSize: 2,
                dataList: []  // 后面 created() 生成示例数据
            },
            created() {
                // 模拟生成 6 组示例数据
                for (let i = 0; i < 6; i++) {
                    this.dataList.push({
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        expanded: false,
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    });
                }
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.dataList.length / this.pageSize);
                },
                paginatedData() {
                    const start = (this.currentPage - 1) * this.pageSize;
                    return this.dataList.slice(start, start + this.pageSize);
                }
            },
            methods: {
                toggleGroup(index) {
                    this.paginatedData[index].expanded = !this.paginatedData[index].expanded;
                },
                changePage(page) {
                    if (page >= 1 && page <= this.totalPages) {
                        this.currentPage = page;
                    }
                },
                exportExcel() {
                    // 1. 准备平铺的数组，每一行对应一个 info 条目
                    const flat = [];
                    this.dataList.forEach(group => {
                        var json = {
                            类别: group.category,
                            区域: group.region,
                            信息详情: []
                        }
                        group.infoList.forEach(info => {
                            json.信息详情.push(info);
                        });
                         flat.push(json);
                    });
                    console.log(flat);

                    // 2. 利用 SheetJS 将 JSON 转成 worksheet
                    const ws = XLSX.utils.json_to_sheet(flat);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, '导出数据');

                    // 3. 触发下载
                    XLSX.writeFile(wb, '导出结果.xlsx');
                }
            }
        });
    </script>
</body>

</html>